
<template>
  <div class="mpBig" :class="{'down':$store.state.mpStatic}">
    
 <!--    <div class="mpTop">
   <range v-model="audio.volume" @on-change="onChangeB"></range>
 </div> -->
    <div class="keepOff"></div>
    <span class="mpSpan" :class="{'down':$store.state.mpStatic}" @touchstart="babox"></span>

    <div @click="mpClose" class="mpClose">
      <span></span>
    </div>

    <div class="mpA">
      <span :class="{'on':spanStatic}"></span>
    </div>

    <div class="mpBottom">
      <span  class="left">{{ audio.currentTime | formatSecond}}</span>
      <range v-model="audio.sliderTime"></range>
      <span  class="right">{{ audio.maxTime | formatSecond}}</span>
    </div>

    <div class="mpClick">
      <span @click="mpNext(2)" class="prev"></span>
      <span v-if="clickStatic" @click="startPlayOrPauseStop" class="stop"></span>
      <span v-else @click="startPlayOrPause" class="play"></span>
      <span @click="mpNext(1)" class="next"></span>
    </div>
    <!-- 此处的ref属性，可以很方便的在vue组件中通过 this.$refs.audio获取该dom元素 controls="controls"-->
    <audio ref="audio" 
    @pause="onPause"
    @play="onPlay"
    @timeupdate="onTimeupdate" 
    @loadedmetadata="onLoadedmetadata"
    :src="date" ></audio>

  </div>
</template>

<script>

// 将整数转换成 时：分：秒的格式
function realFormatSecond(second) {
  var secondType = typeof second

  if (secondType === 'number' || secondType === 'string') {
    second = parseInt(second)

    var hours = Math.floor(second / 3600)
    second = second - hours * 3600
    var mimute = Math.floor(second / 60)
    second = second - mimute * 60
    return ('0' + mimute).slice(-2) + ':' + ('0' + second).slice(-2)
  } else {
    return '00:00'
  }
}

import { Range } from 'vux'
export default {
  props:['date'],
  data () {
    return {
      clickStatic:true,
      playStatic:true,//手机端默认第一次点击
      spanStatic:false,//中间圆盘滚动状态
      boStatic:true,
      url:this.date,
      audio: {
        // 该字段是音频是否处于播放状态的属性
        playing: false,
        // 音频当前播放时长
        currentTime: 0,
        // 音频最大播放时长
        maxTime: 0,
        //播放进度
        sliderTime:'',
        index:1,
        volume:90,

      }
    }
  },
  components:{
    Range
  },
  filters:{
    lineT(val){
      let txt=val.slice(2)
      return txt
    }
  },
  watch:{
    date(){
      this.$refs.audio.pause()
      this.$refs.audio.play()
      this.clickStatic=true
      setTimeout(()=>{
        this.$refs.audio.play()
      },500)
    },
    'audio.currentTime'(){
      this.audio.sliderTime = parseInt(this.audio.currentTime / this.audio.maxTime * 100)
      this.audio.index = parseInt(this.audio.currentTime / this.audio.maxTime*100)
    }
  },
  mounted(){

  },
  methods: {
    babox(){
      this.$router.push({ path: '/mpList'})
      if(this.playStatic==true){
        this.$refs.audio.play()
        setTimeout(()=>{
          this.$refs.audio.pause()
        },100)
        this.playStatic=false
      }   
    },
    //上下一首歌
    mpNext(val){
      this.clickStatic=true
      this.$store.dispatch("mpNext",val)
    },
    //隐藏
    mpClose(){
      this.$store.dispatch("mpClose")
    },
    //音量
    onChangeB(){
      console.log(this.audio.volume)
      this.$refs.audio.volume=this.audio.volume/100
    },
    //进度
    onChangeA(){
      //this.$refs.audio.pause()
      this.$refs.audio.currentTime=parseInt(this.audio.index / 100 * this.audio.maxTime)
      //this.$refs.audio.play()
    },
    // 控制音频的播放
    startPlayOrPause () {
      this.clickStatic=true
      return this.play()
    },
    // 控制音频的暂停
    startPlayOrPauseStop () {
      this.clickStatic=false
      return this.pause()
    },
    // 播放音频
    play () {
      this.spanStatic=true
      this.clickStatic=true
      this.$store.dispatch("mpStatic",0)
      this.$refs.audio.play()
    },
    // 暂停音频
    pause () {
      this.spanStatic=false
      this.$refs.audio.pause()
    },
    // 当音频播放
    onPlay () {
      this.spanStatic=true
      this.audio.playing = true
    },
    // 当音频暂停
    onPause () {
      this.spanStatic=false
      this.$store.dispatch("mpStop")
      this.audio.playing = false
    },
    // 当timeupdate事件大概每秒一次，用来更新音频流的当前播放时间
    onTimeupdate(res) {
      this.audio.currentTime = res.target.currentTime
    },
    // 当加载语音流元数据完成后，会触发该事件的回调函数
    // 语音元数据主要是语音的长度之类的数据
    onLoadedmetadata(res) {
      this.audio.maxTime = parseInt(res.target.duration)
    }
  },
  filters: {
    // 将整数转化成时分秒
    formatSecond(second = 0) {
      return realFormatSecond(second)
    }
  }
}
</script>

<style>

</style>